<template>
  <div class="scroll-wrap">
    <el-table
      class="top-table selectOption"
      :data="tableData"
      border
      style="
        width: 100%;
        margin: 0 auto;
        --el-table-border-color: none;
        --el-table-bg-color: none;
        --el-table-tr-bg-color: none;
      "
      :row-class-name="tableRowClassName"
      :header-row-class-name="tableHeaderRowClassName"
      :cell-style="{
        color: '#FFFFFF',
        // 'text-align': 'center',
        'font-family': 'DINPro',
      }"
      :header-cell-style="{
        backgroundColor: 'transparent !important',
        // backgroundImage: `url(${preview2})`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'auto',
      }"
    >
      <!-- <el-table-column label="设备状态" align="left">
        <template #default="scope">
          <div
            v-show="scope.row.deviceStatus == 1"
            class="flex justify-center items-center"
          >
            <img
              src="@/assets/images/screen/green.png"
              alt=""
              width="22"
              style="transform: scale(1.2)"
            />
            <span class="flex w-[90px] justify-start ml-[10px] c-white">{{
              scope.row.deviceStatusName
            }}</span>
          </div>

          <div
            v-show="scope.row.deviceStatus == 2"
            class="flex justify-center items-center"
          >
            <img
              src="@/assets/images/screen/yellow.png"
              alt=""
              width="22"
              style="transform: scale(1.2)"
            />
            <span class="flex w-[90px] justify-start ml-[10px] c-white">{{
              scope.row.deviceStatusName
            }}</span>
          </div>

          <div
            v-show="scope.row.deviceStatus == 3"
            class="flex justify-center items-center"
          >
            <img
              src="@/assets/images/screen/red.png"
              alt=""
              width="22"
              style="transform: scale(1.2)"
            />
            <span class="flex w-[90px] justify-start ml-[10px] c-white">{{
              scope.row.deviceStatusName
            }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="deviceName"
        label="设备名称"
        width="260"
        show-overflow-tooltip
      /> -->
      <!-- <el-table-column label="TOP" width="100" show-overflow-tooltip>
        <template #default="scope">
          <span v-show="scope.row.deviceName || scope.row.id">
            {{ scope.$index + 1 }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="partName"
        label="零件名称"
        show-overflow-tooltip
        align="center"
      />
      <el-table-column prop="batch" label="批次" width="200" align="center" />
      <el-table-column
        prop="planQuantity"
        label="周排产数量"
        width="200"
        align="center"
      />
      <el-table-column
        prop="completionQuantity"
        label="完成"
        width="200"
        align="center"
      />
      <el-table-column
        prop="completionRate"
        label="完成率"
        width="200"
        align="center"
      >
        <template #default="scope">
          <el-progress
            v-show="scope.row.id"
            :text-inside="true"
            :stroke-width="22"
            :percentage="handlePercentage(scope.row.completionRate)"
          />
          <!-- <span :class="scope.row.deviceStatus == 1 ? 'c-[#00F49C]' : ''">{{
            scope.row.completionRate
          }}</span> -->
        </template>
      </el-table-column>
      <el-table-column
        prop="defectQuantity"
        label="不良品"
        width="200"
        align="center"
      />
      <el-table-column
        prop="defectRate"
        label="不良率"
        width="200"
        align="center"
      />
    </el-table>
    <div class="scroll-content">
      <vue3-seamless-scroll
        class="scroll-list"
        :list="tableData"
        :hover="true"
        :step="1"
        :wheel="true"
        :isWatch="true"
        :limitScrollNum="18"
        :singleHeight="65"
        :singleWaitTime="3000"
        :key="scrollKey"
        v-model="isParse"
      >
        <el-table
          class="scroll-ul bottom-table selectOption"
          :data="tableData"
          border
          style="
            width: 100%;
            margin: 0 auto;
            --el-table-border-color: none;
            --el-table-bg-color: none;
            --el-table-tr-bg-color: none;
          "
          :row-class-name="tableRowClassName"
          :header-row-class-name="tableHeaderRowClassName"
          :cell-style="{
            color: '#FFFFFF',
            // 'text-align': 'center',
            'font-family': 'DINPro',
          }"
          :header-cell-style="{
            backgroundColor: 'transparent !important',
            // backgroundImage: `url(${preview2})`,
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundSize: 'auto',
          }"
        >
          <!-- <el-table-column label="TOP" width="100" show-overflow-tooltip>
            <template #default="scope">
              <span>
                {{ scope.$index + 1 }}
              </span>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="partName"
            label="零件名称"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            prop="batch"
            label="批次"
            width="200"
            align="center"
          />
          <el-table-column
            prop="planQuantity"
            label="周排产数量"
            width="200"
            align="center"
          />
          <el-table-column
            prop="completionQuantity"
            label="完成"
            width="200"
            align="center"
          />
          <el-table-column
            prop="completionRate"
            label="完成率"
            width="200"
            align="center"
          >
            <template #default="scope">
              <el-progress
                v-show="scope.row.id"
                :text-inside="true"
                :stroke-width="22"
                :percentage="handlePercentage(scope.row.completionRate)"
              />
              <!-- <span :class="scope.row.deviceStatus == 1 ? 'c-[#00F49C]' : ''">{{
            scope.row.completionRate
          }}</span> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="defectQuantity"
            label="不良品"
            width="200"
            align="center"
          />
          <el-table-column
            prop="defectRate"
            label="不良率"
            width="200"
            align="center"
          />
        </el-table>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { deepClone } from "@/utils/commonHooks";
import { number } from "echarts";
const props = defineProps({
  // table数据
  planBIDTOS: {
    type: Array,
    default: () => [],
  },
  // table显示行数
  tableColumnNum: {
    type: Number,
    default: 18,
  },
});

const isParse = ref(false);
const { planBIDTOS, tableColumnNum } = toRefs(props);
const tableData = ref<any>([]);
const tableObject = {
  id: "",
  deviceStatusName: "",
  deviceName: "",
  partName: "",
  batch: "",
  planQuantity: "",
  completionQuantity: "",
  completionRate: "",
  defectQuantity: "",
  defectRate: "",
  // deviceStatusName: "停机维修",
  // deviceStatus: "3",
  // deviceName: "DK755-35",
  // partName: "0GC 325 201 G  焊接圆筒",
  // batch: "2029-23",
  // planQuantity: "8500",
  // completionQuantity: "2350",
  // completionRate: "27.6%",
  // defectQuantity: "10",
  // defectRate: "0.42%",
};

const scrollKey = ref<number>(1);
watch(
  () => planBIDTOS,
  (newVal) => {
    const data = deepClone(newVal.value || []);
    if (data.length > tableColumnNum.value) {
      tableData.value = data;
      // tableData.value = data.slice(0, tableColumnNum.value);
    } else {
      let resultData = data;
      const resultNum = tableColumnNum.value - data.length;
      if (resultNum > 0) {
        for (let i = 0; i < resultNum; i++) {
          resultData.push(tableObject);
        }
      }
      tableData.value = resultData;
      // tableData.value = [...resultData, ...resultData];
    }
    if (tableData.value.length > 12) {
      setTimeout(() => {
        isParse.value = true;
      }, 3000);
    } else {
      isParse.value = false;
    }
    scrollKey.value = Number(new Date());
  },
  {
    deep: true,
    immediate: false,
  }
);

// 行样式解析
function tableRowClassName(rowIndex: any) {
  if (rowIndex.rowIndex % 2 != 0) {
    return "evenRow";
  }
  return "oddRow";
}

function tableHeaderRowClassName() {
  if (tableColumnNum.value === 18) {
    return "h-[55px]";
  }
  return "h-[65px]";
}

// 表格百分比处理
function handlePercentage(percent: any) {
  let result = "";
  if (percent && percent.includes("%")) {
    result = percent.split("%")[0];
  }
  return Number(result) || 0;
}
</script>

<style scoped lang="scss">
.scroll-wrap {
  width: 100%;
  height: 850px;
  overflow: hidden;
}
.scroll-header,
.scroll-content {
  width: 100%;
  display: flex;
}
.scroll-list {
  width: 100%;
  overflow: hidden;
}
.scroll-ul {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-li {
  width: 100%;
  display: flex;
  line-height: 35px;
}
// .scroll-li > span {
//   display: flex;
//   height: 35px;
//   line-height: 35px;
//   border-top: 1px solid #dcdfe6;
//   border-left: 1px solid #dcdfe6;
//   padding-left: 5px;
//   overflow: hidden;
// }
// .scroll-li > span:last-child {
//   border-right: 1px solid #dcdfe6;
// }
// .scroll-header .scroll-li {
//   background-color: #f8f9ff;
// }
// .scroll-header .scroll-li > span {
//   font-weight: bold;
//   border-top: none;
// }
// .scroll-content .scroll-ul:last-child .scroll-li {
//   border-bottom: 1px solid #dcdfe6;
// }
:deep(.bottom-table .el-table__header) {
  display: none;
}

:deep(.top-table .el-table__body-wrapper) {
  display: none;
}
// 整体表格样式
:deep(.el-table) {
  thead {
    // height: 78px;
    background: rgba(15, 36, 62, 0.6);
    .cell {
      font-size: 30px;
      line-height: 32px;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      writing-mode: horizontal-tb;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(88, 175, 255) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      clip-path: inset(1px);
    }
  }
  tbody {
    tr {
      height: 65px;
      .cell {
        font-size: 31px;
        line-height: 32px;
      }
      td:nth-last-child(1) .cell {
        color: #f55555;
      }
    }
    tr:hover {
      background-color: rgb(55, 90, 136) !important;
    }
    td.el-table__cell {
      background-color: transparent !important;
      padding: 0;
    }
  }

  .el-table__empty-text {
    color: rgb(199, 228, 240);
    font-size: 30px;
    line-height: 200px;
  }
}

// 单行样式
:deep(.evenRow) {
  background: rgba(15, 36, 62, 0.95);
  td {
    .cell {
      color: rgb(104, 201, 240);
    }
  }
}

// 双行样式
:deep(.oddRow) {
  background: rgba(10, 24, 42, 0.95);
  td {
    .cell {
      color: rgb(168, 190, 216);
    }
  }
}
:deep(.el-progress) {
  .el-progress-bar__outer {
    background: rgba(74, 97, 126, 0.95);
  }
  .el-progress-bar__innerText {
    font-size: 17px;
  }
  .el-progress-bar__outer {
    border-radius: 8px;
  }
  .el-progress-bar__inner {
    border-radius: 8px;
    background-image: linear-gradient(
      to right,
      rgb(25, 76, 135),
      rgb(0, 141, 255)
    );
  }
}
</style>
